<template>
  <div class="BeeperRecordTable">
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.open"
      width="max-content"
      append-to-body
      center
    >
      <el-row style="position: relative;">
        <el-button
          :class="['refresh', loading ? 'rotate-cartoon' : '']"
          type="success"
          plain
          circle
          icon="el-icon-refresh-right"
          size="small"
          @click="getData"
        ></el-button>
        <el-table :data="tableList" :fit="true" highlight-current-row>
          <el-table-column
            prop="recordType"
            :formatter="formatRecordType"
            label="呼叫类型"
            align="center"
            width="100"
          ></el-table-column>

          <el-table-column
            prop="serverName"
            label="功能名称"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="nums"
            label="数量"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="businessName"
            label="商户"
            align="center"
            width="180"
          ></el-table-column>
          <!--<el-table-column prop="recordState" :formatter="formatRecordState" label="处理状态" align="center" width="150"></el-table-column>
             <el-table-column prop="fastFlag" :formatter="formatFastFlag"  label="是否加急" align="center" width="100">
               <template slot-scope="scope">
                  <span>
                    <el-tag size="mini" type="danger" v-if="scope.row.fastFlag == 1">
                      急
                    </el-tag>
                  </span>
               </template>
             </el-table-column>-->
          <el-table-column
            prop="createDate"
            label="呼叫时间"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="cancelDate"
            label="取消时间"
            align="center"
            width="100"
          ></el-table-column>
          <!--<el-table-column label="操作" align="center">
                <template slot-scope="scope" >
                    <div v-if="scope.row.recordState==1&&(scope.row.recordType==2 || scope.row.recordType==4)">
                        <el-button style="color:#4DA635"  size="mini" @click.native="handleUpdateRecord(scope.row, 2)">接单</el-button>
                    </div>
                  <div v-if="scope.row.recordState==2&&scope.row.recordType==2">
                    <el-button style="color:#4DA635"  size="mini" @click.native="handleUpdateRecord(scope.row, 20)">完成</el-button>
                  </div>
                </template>
             </el-table-column>-->
        </el-table>
        <div class="pageBox">
            <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, jumper, next, pager, prev"
          :total="page.pageTotal"
        ></el-pagination>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import BeeperApi from "@/api/equip/beeper";
export default {
  data() {
    return {
      dialog: {
        open: false, // 默认隐藏
        title: "",
      },
      beeperId: "",
      loading: false,
      tableList: [],
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$Utils.clearData(this.tableList);
    },
    formatRecordType(row, column, cellValue) {
      if (cellValue === 1) {
        return "连接wifi";
      } else if (cellValue === 2) {
        return "服务";
      } else if (cellValue === 3) {
        return "取消";
      } else if (cellValue === 4) {
        return "万能";
      }
    },
    formatFastFlag(cellValue) {
      if (cellValue === 1) {
        return "急";
      } else if (cellValue === 0) {
        return "";
      }
    },
    formatRecordState(row, column, cellValue) {
      if (cellValue === 1) {
        return "待接单";
      } else if (cellValue === 2) {
        return "已接单";
      } else if (cellValue === 3) {
        return "已取消";
      } else if (cellValue == 4) {
        return "取消失败";
      } else if (cellValue == 20) {
        return "已完成";
      }
    },
    handleUpdateRecord(val, state) {
      let _this = this;
      let cond = {
        id: val.beeperRecordId,
        state: state,
      };
      BeeperApi.updateRecord(cond).then((res) => {
        _this.handleCreate(val.beeperId);
      });
    },
    handleCreate(val) {
      // 父组件 调用子组件
      this.dialog.open = true; // 显示弹出框
      this.dialog.title = "呼 叫 记 录";
      this.beeperId = val;
      this.getData();
      // var cond = {
      //     beeperId: val
      // }
      // BeeperApi.checkBeeperList(cond)
      //     .then(res => {
      //         this.tableList = res.data
      //     })
    },
    getData() {
      this.loading = true;
      var cond = {
        beeperId: this.beeperId,
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
      };
      BeeperApi.checkBeeperList(cond).then((res) => {
        this.loading = false;
        this.tableList = res.data.list || [];
        this.page.pageTotal = res.data.total
      });
    },
    handleSizeChange(size) {
      let _this = this;
      _this.page.pageSize = size;
      _this.getData();
    },
    handleCurrentChange(val) {
      let _this = this;
      _this.page.pageNo = val;
      _this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.refresh {
  position: absolute;
  left: 20px;
  z-index: 9999;
  top: -65px;
  font-size: 16px;
}
.rotate-cartoon {
  animation: cartoon 0.5s linear 0s infinite backwards;
  // -webkit-animation:cartoon .3s linear 0  infinite
}
@keyframes cartoon {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pageBox{
    text-align: center;
    margin-top: 10px;
}
</style>
